<template>
  <div class="page" ref="page">
    <div class="bottom-canvas" @click="clickBottomButton">
      <div class="bottom-arrow"></div>
    </div>
    <!--<lazer :height="1000" :width="1000"></lazer>-->

    <navbar @toggleMenu="toggleMenu"></navbar>
    <transition name="slide-left" mode="out-in">
      <div v-if="init" class="scroll-canvas">
        <div class="background">
          <meteor :height="canvasHeight" :width="canvasWidth"></meteor>
        </div>
        <content-list ref="contentList" @onRefresh="onRefresh" class="scroll-content" :items="contentList"
                      @onItemClicked="onListItemClicked">
        </content-list>
      </div>
    </transition>
    <left-menu ref="left-menu">
      <div slot="head">test</div>
      <div slot="content">test</div>
      <div slot="tail">test</div>
    </left-menu>
  </div>
</template>

<style scoped>

  .background {
    position: absolute;
    z-index: -1;
    left: 0;
    top: 0;
  }

  .page {
    height: 100%;
    background-color: rgba(0, 0, 0, 0.1);
    width: 100%;
  }

  .scroll-canvas {
    padding-top: 64px;
    height: calc(100% - 64px);
    overflow-x: hidden;
    width: 100%;
  }

  .bottom-canvas {

    position: absolute;

    z-index: 9999;
    bottom: 30px;
    width: 100%;
  }

  .bottom-arrow {
    margin-left: auto;
    margin-right: auto;
    border-radius: 20px;
    background-repeat: no-repeat;
    background-position: center;
    background-color: rgba(0, 0, 0, 0.4);
    height: 40px;
    width: 40px;
    background-image: url("./img/bottom-arrow.png");

  }

  .menu-button > div {
    width: 100%;
  }


</style>

<script>

  let left_menu = resolve => {
    require(['../../components/left-menu-list'], resolve);
  }
  let gradient_test1 = resolve => {
    require(['../../components/gradient_test1'], resolve);
  }
  let content_list = resolve => {
    require(['../../components/content_list'], resolve);
  }
  let dropdown_item = resolve => {
    require(['../../components/dropdown_item'], resolve);
  }
  let navbar = resolve => {
    require(['../../components/blog_static_navbar'], resolve);
  }
  let lazer = resolve => {
    require(['../../components/canvas_background/lazer/index'], resolve);
  }
  let meteor = resolve => {
    require(['../../components/canvas_background/meteor/index'], resolve);
  }


  import zhRequest from '../../utils/geralt_common/network_function';
  import manageInterface from '../../interface/manageInterface';
  import manageConstant from '../../constant/manageConstant';
  let animationFunction = require('../../utils/geralt_common/animation_function');

  export default{
    mounted() {
    	this.$nextTick(()=>{
        this.init=!this.init
      });
      this.initListData()
      this.canvasHeight = document.body.clientHeight;
      this.canvasWidth = document.body.clientWidth;
    },
    components: {
      'left-menu': left_menu,
      'gradient-test1': gradient_test1,
      'content-list': content_list,
      'dropdown_item': dropdown_item,
      'navbar': navbar,
      'lazer': lazer,
      'meteor': meteor,
    },

    data(){
      return {
      	init: false,
        isToggle: false,
        dropdownList: [
          'test1', 'test2', 'test3'
        ],
        contentList: [
          {title: 'test', content: "test"}
        ],
        canvasHeight: 0,
        canvasWidth: 0
      }
    },
    methods: {
      onRefresh(){
        this.initListData()
      },
      onListItemClicked(item){
        console.log('list item clicked', item);
        this.$router.push({path: '/detailPage', query: {item: item._id}});
      },
      toggleMenu: function () {
        console.log('toggle:', this.isToggle);
        this.$refs['left-menu'].toggleMenu();
        if (this.isToggle)
          this.isToggle = false;
        else
          this.isToggle = true;
      },

      clickBottomButton: function () {

        let self = this;
        let page = document.getElementsByClassName('drag_down_canvas')[0];
        let startPosition = page.scrollTop;
        let endPosition = startPosition + 2 * self.cavasHeight > page.scrollHeight ? page.scrollHeight - self.cavasHeight : startPosition + self.cavasHeight;
        this.scrollAnimationY(page, startPosition, endPosition + page.offsetTop);

      },
      scrollAnimationY(dom, startPosition, endPosition){

        let self = this;
        let t = 0.01;
        console.log()
        let timer = setInterval(function () {
          let bezierOffset = animationFunction.animationFunction.bezier(startPosition, endPosition, t)
          console.warn('startPosition', startPosition, '    endPosition', endPosition, ' bezierOffset', bezierOffset);
          let offset = dom.scrollTop;
          if (bezierOffset < endPosition) {
            dom.scrollTo(0, bezierOffset);
          }
          else {
            clearInterval(timer);
          }
          t += 0.05;
        }, 20);
      },
      initListData(){
        zhRequest.get(
          manageInterface.adminBlogDocumentUrl,
          {},
          (result) => {
            this.contentList = result.data.map((item) => {
              return {
                _id: item._id,
                title: item.title,
                content: item.simpleDoc,
                thumb: item.thumb
              }
            });
            this.$refs.contentList.stopRefresh()
          },
          (result) => {
            alert('fallback');
          }
        )
      }
    }
  }
</script>
